<template>
  <div id="app">
    <div class="full">
      <!--顶部工具栏开始-->
      <top :isPc="isPc" :list2="list2"></top>
      <!-- <div class="toolbar">
        <div class="button-group">
          <el-button-group>
            <el-button type="primary" size="small" @click="switchPc">
              <img src="../assets/image/computer.png">
            </el-button>
            <el-button type="primary" size="small" @click="switchPhone">
              <img src="../assets/image/phone.png">
            </el-button>
          </el-button-group>
        </div>
        <div class="split-line" />
        <div class="button-group">
          <el-button type="primary" size="small" @click="handelDelete">
            <img src="../assets/image/deleteIcon.png">
          </el-button>
        </div>
        <div class="split-line" />
        <div class="button-group">
          <el-select v-model="equipment" placeholder="请选择设备" @change="changeEquipment(equipment)">
            <el-option
              v-for="item in equipmentList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div> -->
      <!--顶部工具栏结束-->

      <!--中间整体部分开始-->
      <div class="full-container">
        <!--左边组件库面板开始-->
        <transition name="slide-fade">
          <div class="edit-panel" style="float: left" v-show="showLeft">
            <div class="panel-title">
              组件库
            </div>
            <div class="widget-panel">
              <el-collapse v-model="activeNames" style="padding-left: 10px" @change="handleChange">
                <el-collapse-item title="基础元素" name="1">
                  <div>
                    <ul class="widget-class-container basic">
                      <draggable
                        class="dragArea list-group"
                        :list="list1"
                        :group="{name:'people',pull:'clone',put:false}"
                        :clone="clone"
                        @change="log"
                      >
                        <li v-for="element in list1" :key="element.name" class="widget-class-item" @mouseover="mouseover(element.name)" @mouseout="mouseout(element.name)">
                          <div class="icon-wgt">
                            <img :src="element.icon">
                          </div>
                          <div class="widget-name">{{ element.name }}</div>
                        </li>
                      </draggable>
                    </ul>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="控制元素" name="2" class="edge">
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </transition>
        <!--左边组件库部分结束-->
        <div class="foldLeft">
          <div class="leftIcon" @click="showLeft = ! showLeft">
            <img v-if="showLeft" src="../assets/image/foldIcon.png">
            <img v-else src="../assets/image/unfoldIcon.png">
          </div>
        </div>

        <!--右边属性部分开始-->
        <transition name="slide-fade">
          <div class="edit-panel" style="float: right;" v-show="showRight">
            <div class="option-container">
              <el-input placeholder="元件名称" class="input" />
              <el-tabs v-model="activeName" type="card" stretch style="margin-top: 10px;background-color: #ffffff" @tab-click="handleClick">
                <el-tab-pane label="属性" name="first">
                  <!--v-if="type === 'line-chart'"-->
                  <div v-if="type === 'line-chart'">
                    <el-collapse style="padding:0 10px">
                      <el-collapse-item title="图例" name="1">
                        <el-radio label="1"><input v-model="list2[index].axisName" style="padding: 7px 6px;width: 60%;margin-left: 10px;"></el-radio>
                      </el-collapse-item>
                      <el-collapse-item title="选择数据流" name="2" />
                      <el-collapse-item title="刷新频率" name="3" />
                    </el-collapse>
                  </div>
                  <!--v-if="type === 'Link'"-->
                  <div v-if="type === 'Link'">
                    <el-collapse style="padding:0 10px">
                      <el-collapse-item title="链接类型" name="1">
                        <el-select v-model="list2[index].linkType" filterable placeholder="请选择">
                          <el-option
                            v-for="item in linkTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                            <span :style="{ color:item.color }">{{ item.label }}</span>
                          </el-option>
                        </el-select>
                        <p style="margin-bottom:2px">文字内容</p>
                        <el-input v-model="list2[index].linkText" />
                      </el-collapse-item>
                      <el-collapse-item title="链接到" name="2">
                        <el-input v-model="list2[index].href" />
                      </el-collapse-item>
                    </el-collapse>
                  </div>
                  <!--v-if="type === 'Table'"-->
                  <div v-if="type === 'Table'">
                    <el-collapse style="padding:0 10px">
                      <el-collapse-item title="选择数据流" name="1">
                        设备：
                        <el-select v-model="equipment" placeholder="请选择设备" @change="changeEquipment(equipment)">
                          <el-option
                            v-for="item in equipmentList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-collapse-item>
                      <el-collapse-item title="刷新频率" name="2">
                        <el-input-number
                          v-model="tableFlushNum"
                          controls-position="right"
                          :min="3"
                          size="small"
                          style="width: 80%"
                          @change="handleTableFlushChange"
                        />
                      </el-collapse-item>
                    </el-collapse>
                  </div>
                  <!--v-if="type === 'z-image'"-->
                  <div v-if="type === 'z-image'">
                    <el-collapse style="padding:0 10px">
                      <el-collapse-item title="图片类型" name="1">
                        <el-radio-group>
                          <el-radio :label="3" style="margin: 5px 0">单张图片</el-radio>
                          <el-radio :label="6" style="margin: 5px 0">图片格式的数据流</el-radio>
                          <el-radio :label="9" style="margin: 5px 0">根据数据流显示图片</el-radio>
                        </el-radio-group>
                      </el-collapse-item>
                      <el-collapse-item title="上传图片" name="2">
                        <el-upload
                          action="https://jsonplaceholder.typicode.com/posts/"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          :on-success="handleSuccess"
                        >
                          <el-button size="small" type="primary">点击上传</el-button>
                          <div slot="tip" class="el-upload__tip">只能上传常见的图片格式文件，jpg/jpeg/png/git，且不超过500kb</div>
                        </el-upload>
                      </el-collapse-item>
                    </el-collapse>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="样式" name="second">
                  <!--v-if="type === 'line-chart'"-->
                  <div v-if="type === 'line-chart'">
                    <el-collapse style="padding:0 10px">
                      <el-collapse-item title="标题" name="1">
                        <div class="title">标题</div>
                        <input v-model="list2[index].name" style="padding: 12px 6px;margin: 6px 0;color:#5a5e66;" :placeholder="list2[index].name">

                        <div class="title">颜色</div>
                        <div class="flex-r" style="justify-content: space-between;margin: 6px 0;">
                          <el-color-picker v-model="list2[index].titleColor" />
                          <input v-model="list2[index].titleColor" style="padding: 8px 6px; width:60%;margin-right: 7px;">
                        </div>

                        <div class="title">对齐</div>

                        <div class="flex-r">
                          <div class="left-span align-span" :class="{bgb:list2[index].leftActive}" @click="changeAlign('left')">
                            <div v-if="list2[index].leftActive === true"><img src="@/assets/image/align-left-white.png" alt="左对齐" width="12px" height="12px"></div>
                            <div v-if="list2[index].leftActive === false"><img src="@/assets/image/align-left.png" alt="左对齐" width="12px" height="12px"></div>
                          </div>
                          <div class="center-span align-span" :class="{bgb:list2[index].centerActive}" @click="changeAlign('center')">
                            <div v-if="list2[index].centerActive === true"><img src="@/assets/image/align-center-white.png" alt="居中对齐" width="12px" height="12px"></div>
                            <div v-if="list2[index].centerActive === false"><img src="@/assets/image/align-center.png" alt="居中对齐" width="12px" height="12px"></div>
                          </div>
                          <div class="right-span align-span" :class="{bgb:list2[index].rightActive}" @click="changeAlign('right')">
                            <div v-if="list2[index].rightActive === true"><img src="@/assets/image/align-right-white.png" alt="右对齐" width="12px" height="12px"></div>
                            <div v-if="list2[index].rightActive === false"><img src="@/assets/image/align-right.png" alt="右对齐" width="12px" height="12px"></div>
                          </div>
                        </div>
                      </el-collapse-item>
                      <el-collapse-item :title="'折线: ' + list2[index].axisName">
                        <div class="title">样式</div>
                        <div class="secondTitle">
                          <el-checkbox v-model="list2[index].linestyle.smooth">平滑效果</el-checkbox>
                        </div>
                        <div class="secondTitle">
                          <el-checkbox v-model="list2[index].linestyle.showData">显示数值</el-checkbox>
                        </div>
                        <div class="secondTitle">
                          <div class="title">颜色填充</div>
                          <div class="flex-r" style="justify-content: space-between;margin: 6px 0;">
                            <el-color-picker v-model="list2[index].linestyle.lineColor" />
                            <input v-model="list2[index].linestyle.lineColor" style="padding: 8px 6px; width:60%;margin-right: 7px;">
                          </div>
                        </div>
                        <div class="secondTitle">
                          <!--<el-checkbox v-model="label3">渐变填充</el-checkbox>-->
                          <div class="title" style="margin: 6px 0;">区域填充</div>
                          <el-radio-group v-model="list2[index].areaIndex">
                            <el-radio :label="1">极光</el-radio>
                            <el-radio :label="2">炫红</el-radio>
                            <el-radio :label="3" style="margin-top: 10px;">淡雅</el-radio>
                            <el-radio :label="4" style="margin-top: 10px;">无</el-radio>
                          </el-radio-group>
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="x轴">
                        <el-checkbox v-model="list2[index].axisAttribute.xAttr.showXLine">显示坐标轴线</el-checkbox>
                        <el-checkbox v-model="list2[index].axisAttribute.xAttr.showXData">显示坐标值</el-checkbox>
                        <div class="title">轴颜色</div>
                        <div class="flex-r" style="justify-content: space-between;margin: 6px 0;">
                          <el-color-picker v-model="list2[index].axisAttribute.xAttr.showXColor" />
                          <input v-model="list2[index].axisAttribute.xAttr.showXColor" style="padding: 8px 6px; width:60%;margin-right: 7px;">
                        </div>

                        <div class="title">分割线</div>
                        <div>
                          <el-select v-model="list2[index].axisAttribute.xAttr.muitiXType" placehol-xder="请选择">
                            <el-option :key="'dashed'" :label="'虚线分割线'" :value="'dashed'" />
                            <el-option :key="'solid'" :label="'实线分割线'" :value="'solid'" />
                            <el-option :key="'noshow'" :label="'不显示'" :value="false" />
                          </el-select>
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="y轴">
                        <div style="margin: 10px 0;">
                          <el-checkbox v-model="list2[index].axisAttribute.yAttr.showYLine">显示坐标轴线</el-checkbox>
                          <el-checkbox v-model="list2[index].axisAttribute.yAttr.showYData">显示坐标值</el-checkbox>
                        </div>
                        <div class="title">轴颜色</div>
                        <div class="flex-r" style="justify-content: space-between;margin: 6px 0;">
                          <el-color-picker v-model="list2[index].axisAttribute.yAttr.showYColor" />
                          <input v-model="list2[index].axisAttribute.yAttr.showYColor" style="padding: 8px 6px; width:60%;margin-right: 7px;">
                        </div>

                        <div class="title">分割线</div>
                        <div>
                          <el-select v-model="list2[index].axisAttribute.yAttr.muitiYType" placeholder="请选择">
                            <el-option :key="'dashed'" :label="'虚线分割线'" :value="'dashed'" />
                            <el-option :key="'solid'" :label="'实线分割线'" :value="'solid'" />
                            <el-option :key="'noshow'" :label="'不显示'" :value="false" />
                          </el-select>
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </div>
                  <!--v-if="type === 'Link'"-->
                  <div v-if="type === 'Link'" style="padding:0 10px">
                    <div style="margin: 5px 0">
                      <el-checkbox v-model="list2[index].disabled">禁用链接</el-checkbox>
                      <el-checkbox v-model="linkUnderline" @change="changeLinkUnderline(linkUnderline)">去除下划线</el-checkbox>
                    </div>
                  </div>
                  <!--v-if="type === 'Table'"-->
                  <div v-if="type === 'Table'" style="padding:0 10px">
                    <el-collapse style="margin: 5px 0">
                      <el-collapse-item title="表格大小" name="1">
                        高度：
                        <el-input v-model="list2[index].tableHeight" placeholder="请输入高度"/>
                        宽度：
                        <el-input v-model="list2[index].span" placeholder="请输入宽度" />
                        尺寸：
                        <el-select v-model="list2[index].tableSize" placeholder="请选择尺寸">
                          <el-option
                            v-for="item in tableSizeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-collapse-item>
                      <el-collapse-item title="表格美化" name="2">
                        <el-checkbox v-model="list2[index].stripe">添加斑马纹</el-checkbox>
                        <el-checkbox v-model="list2[index].tableBorder">添加边框</el-checkbox>
                        <el-checkbox v-model="list2[index].highlightCurrentRow">高亮当前行</el-checkbox>
                        <el-checkbox v-model="tableFit" @change="changeableFit(tableFit)">不自撑开列</el-checkbox>
                        <div style="margin-top: 5px">
                          空数据时显示文本内容：
                          <el-input v-model="list2[index].emptyText" placeholder="请输入内容" />
                        </div>
                      </el-collapse-item>
                      <el-collapse-item title="添加可选列" name="3">
                        <el-checkbox v-model="list2[index].operationCol">添加操作列</el-checkbox>
                        <el-checkbox v-model="list2[index].indexCol">添加索引列</el-checkbox>
                        <el-checkbox v-model="list2[index].selectionCol">添加选择列</el-checkbox>
                      </el-collapse-item>
                    </el-collapse>
                  </div>
                  <!--v-if="type === 'z-image'"-->
                  <div v-if="type === 'z-image'">
                    暂无样式
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </transition>
        <!--右边属性部分结束-->

        <div class="foldRight">
          <div class="rightIcon" @click="showRight = ! showRight">
            <img v-if="showRight" src="../assets/image/unfoldIcon.png">
            <img v-else src="../assets/image/foldIcon.png">
          </div>
        </div>

        <!--中间编辑部分开始-->
        <div v-if="$store.state.isPc" class="edit-stage">
          <div class="for-container-scroll">
            <div class="main-stage">
              <div class="row">
                <el-row :gutter="15">
                  <draggable
                    class="dragArea list-group"
                    :list="list2"
                    group="people"
                    @change="log"
                    @start="isDragging = true"
                    @end="isDragging = false"
                  >
                    <transition-group type="transition" name="flip-list">
                      <el-col
                        v-for="(element) in list2"
                        :key="element.type"
                        :span="element.span"
                        class="list-group-item"
                      >
                        <card
                          :did="index + 'test'"
                          :height="element.height"
                          @click.native="changeType(element.type,index)"
                        >
                          <el-card
                            :class="{'active': element.isActive}"
                            class="elCard"
                          >
                            <component
                              :is="element.type"
                              :e-id="'temperature' + index"
                              :title="element.name"
                              color-arr="64,158,255"
                              :title-color="element.titleColor"
                              :title-align="element.titleAlign"
                              :linestyle="element.linestyle"
                              :area-index="element.areaIndex"
                              :axis-attribute="element.axisAttribute"
                              :axis-name="element.axisName"
                              :link-text="element.linkText"
                              :link-type="element.linkType"
                              :underline="element.underline"
                              :disabled="element.disabled"
                              :href="element.href"
                              :table-data="element.tableData"
                              :column-data="element.columnData"
                              :stripe="element.stripe"
                              :table-border="element.tableBorder"
                              :table-size="element.tableSize"
                              :table-fit="element.tableFit"
                              :table-height="element.tableHeight"
                              :empty-text="element.emptyText"
                              :operation-col="element.operationCol"
                              :index-col="element.indexCol"
                              :selection-col="element.selectionCol"
                              :highlight-current-row="element.highlightCurrentRow"
                              :src="element.src"
                            />
                          </el-card>
                        </card>
                      </el-col>
                    </transition-group>
                  </draggable>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <!--中间编辑部分结束-->
      </div>
      <!--中间整体部分结束-->
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
// import { Link, LineChart, Table, Zimage, card } from '@/components/elecomponent'
import Link from '@/components/elecomponent/link.vue'
import Table from '@/components/elecomponent/table.vue'
import Zimage from '@/components/elecomponent/image.vue'
import card from '@/components/elecomponent/card.vue'
// import LineChart from '@/components/echarts/line-chart.vue'
// import Pie from '@/components/echarts/pie.vue'
// import ElCollapseTransition from 'element-ui/lib/transitions/collapse-transition'
import Top from '@/views/app/components/demoChild/top.vue'

export default {
  name: 'Demo',
  order: 2,
  components: {
    Top,
    draggable,
    Link,
    // LineChart  //无法导入
    Table,
    Zimage,
    card
    // ElCollapseTransition,
    // LineChart
    // Pie
  },
  data () {
    return {
      isPc: true,
      activeNames: ['1'],
      activeName: 'first',
      linkUnderline: false, // 设置链接下划线
      equipment: '', // 表格中选择的设备
      tableFlushNum: '', // 表格中刷新频率
      tableFit: false, // 列的宽度是否自撑开
      type: '', // 动态组件类型
      index: 0, // 动态组件list2的索引值
      showLeft: true,
      showRight: true,
      icon: '',
      list1: [
        {
          name: '折线图',
          id: 1,
          span: 6,
          type: 'line-chart',
          icon: require('../assets/image/lineIcon.png'),
          hoverIcon: require('../assets/image/lineIcon1.png')
        },
        {
          name: '图片',
          id: 2,
          span: 6,
          type: 'z-image',
          icon: require('../assets/image/imageIcon.png'),
          hoverIcon: require('../assets/image/imageIcon1.png')
        },
        {
          name: '链接',
          id: 3,
          span: 2.5,
          type: 'Link',
          icon: require('@/assets/image/imageIcon.png'),
          hoverIcon: require('@/assets/image/linkIcon1.png')
        },
        {
          name: '表格',
          id: 4,
          span: 12,
          type: 'Table',
          icon: require('../assets/image/tableIcon.png'),
          hoverIcon: require('../assets/image/tableIcon1.png')
        }
      ],
      list2: [
        { name: '空气质量数据曲线',
        id: 3,
        linestyle: { smooth: false, showData: false, lineColor: '#999' },
        areaIndex: 4,
        axisName: '未命名',
        span: 12,
        height: '300px',
        titleColor: '#333',
        titleAlign: 'left',
        leftActive: true,
        centerActive: false,
        rightActive: false,
        type: 'line-chart',
        axisAttribute: { xAttr: { showXLine: true, showXData: true, showXColor: '#000', muitiXType: false },
        yAttr: { showYLine: true, showYData: true, showYColor: '#000', muitiYType: 'dashed' } }
        },
        {
          span: 3,
          height: '60px',
          type: 'Link',
          linkText: '默认链接',
          linkType: 'default',
          underline: true,
          disabled: false,
          href: 'http://'
        },
        {
          span: 24,
          height: '240px',
          type: 'Table',
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-05',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1514 弄'
          }, {
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1513 弄'
          }],
          columnData: [{
            prop: 'date',
            label: '日期',
            width: '180'
          }, {
            prop: 'name',
            label: '姓名',
            width: '180'
          }, {
            prop: 'address',
            label: '地址'
          }],
          stripe: false,
          tableBorder: false,
          tableHeight: '200px',
          tableSize: '',
          tableFit: true,
          emptyText: '暂无数据',
          operationCol: false,
          indexCol: false,
          selectionCol: false,
          highlightCurrentRow: false
        },
        {
          span: 6,
          type: 'z-image',
          height: '200px',
          src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        }
      ],
      lineData: {
        createTime: [1, 2, 3, 4],
        temperature: [1, 3, 2, 4],
        pieData: []
      },
      linkTypeList: [ // 链接类型列表
        {
          value: 'default',
          label: '默认链接',
          color: '#000000'
        },
        {
          value: 'primary',
          label: '主要链接',
          color: '#409EFF'
        },
        {
          value: 'success',
          label: '成功链接',
          color: '#67C23A'
        },
        {
          value: 'warning',
          label: '警告链接',
          color: '#E6A23C'
        },
        {
          value: 'danger',
          label: '危险链接',
          color: '#F56C6C'
        },
        {
          value: 'info',
          label: '信息链接',
          color: '#909399'
        }
      ],
      equipmentList: [ // 表格中设备列表
        {
          value: 'sdf',
          label: 'sdf'
        }
      ],
      tableSizeList: [ // 表格尺寸列表
        {
          value: 'medium',
          label: '中等'
        },
        {
          value: 'small',
          label: '小'
        },
        {
          value: 'mini',
          label: '迷你'
        }
      ]
    }
  },
  mounted () {
    // this.list2.forEach((element, index) => {
    //   // request.get(element.dataSource).then(res => {
    //   const a = [
    //     {
    //       createTime: '2222',
    //       temperature: 15
    //     }
    //   ]
    //   this.list2[index].data = a
    //   // })
    // })
  },
  methods: {
    changeAlign (type) {
      // type 判断是何种对齐方式
      console.log(type)
      switch (type) {
        case 'left':
          this.list2[this.index].titleAlign = 'left'
          this.list2[this.index].leftActive = true
          this.list2[this.index].centerActive = false
          this.list2[this.index].rightActive = false
          break
        case 'center':
          this.list2[this.index].titleAlign = 'center'
          this.list2[this.index].leftActive = false
          this.list2[this.index].centerActive = true
          this.list2[this.index].rightActive = false
          break
        case 'right':
          this.list2[this.index].titleAlign = 'right'
          this.list2[this.index].leftActive = false
          this.list2[this.index].centerActive = false
          this.list2[this.index].rightActive = true
          break
      }
    },
    // 切换为Pc端
    switchPc () {
      this.isPc = true
    },
    // 切换为手机端
    switchPhone () {
      this.isPc = false
    },
    // 删除卡片
    handelDelete () {
      console.log(this.index)
      this.list2.splice(this.index, 1)
    },
    handleChange (val) {
      console.log(val)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    clone ({ type }) {
      console.log(type)
      if (type === 'Link') {
        return {
          span: 3,
          height: '60px',
          type: 'Link',
          linkText: '默认链接',
          linkType: '',
          underline: true,
          disabled: false,
          href: 'http://',
          isActive: false
        }
      } else if (type === 'line-chart') {
        return {
          span: 12,
          axisName: '未命名',
          name: '折线图',
          type: 'line-chart',
          height: '300px',
          isActive: false,
          titleColor: '#333',
          titleAlign: 'left',
          leftActive: true,
          centerActive: false,
          rightActive: false,
          linestyle: {
            smooth: false,
            showData: false,
            lineColor: '#999'
          },
          areaIndex: 4,
          axisAttribute: {
            xAttr: { showXLine: true, showXData: true, showXColor: '#000', muitiXType: false },
            yAttr: { showYLine: 'true', showYData: 'true', showYColor: '#000', muitiYType: 'dashed' }
          }
        }
      } else if (type === 'Table') {
        return {
          smooth: false,
          span: 24,
          height: '240px',
          type: 'Table',
          tableData: [],
          columnData: [],
          stripe: false,
          tableBorder: false,
          tableHeight: '200px',
          tableSize: '',
          tableFit: true,
          emptyText: '暂无数据',
          operationCol: false,
          indexCol: false,
          selectionCol: false,
          highlightCurrentRow: false,
          isActive: false
        }
      } else if (type === 'z-image') {
        return {
          span: 6,
          type: 'z-image',
          src: '',
          isActive: false
        }
      }
    },
    // 模拟hover过程
    mouseover (name) {
      const index = this.list1.findIndex(function (item) {
        return item.name === name
      })
      this.icon = this.list1[index].icon
      const hoverIcon = this.list1[index].hoverIcon
      this.list1[index].icon = hoverIcon
    },
    mouseout (name) {
      const index = this.list1.findIndex(function (item) {
        return item.name === name
      })
      this.list1[index].icon = this.icon
    },
    log: function (evt) { // evt里面有两个值，evt.added知道移动元素的ID，evt.removed知道删除元素的ID
      window.console.log(evt)
      console.log(this.list2)
    },
    // 获取卡片动态组件类型和索引
    changeType (type, index) {
      console.log(index)
      this.type = type
      this.index = index
      this.list2.forEach(data => {
        data.isActive = false
      })
      this.list2[this.index].isActive = true
    },
    // 设置表格中的数据流
    changeEquipment (equipment) {
      console.log(equipment)
      // this.list2[this.index].tableData =
      // this.list2[this.index].columnData =
    },
    // 设置表格中的刷新频率
    handleTableFlushChange (value) {
      console.log(value)
    },
    // 设置链接是否有下划线
    changeLinkUnderline (linkUnderline) {
      console.log(linkUnderline)
      this.list2[this.index].underline = !linkUnderline
    },
    // 表格的列是否自撑开
    changeableFit (tableFit) {
      console.log(tableFit)
      this.list2[this.index].tableFit = !tableFit
    }
  }
}
</script>

<style scoped>
  #app div{
    box-sizing: border-box;
  }
  div{
    display: block;
  }
  .full{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .toolbar{
    margin-left: 256px;
    width: 85%;
    height: 50px;
    background-image: linear-gradient(135deg, #041424 0%, #04294E 50%, #362D72 100%);
    position: fixed;

    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }
  .full-container{
    padding-top: 50px;
    height: 100%;
    overflow: hidden;
    background: #ecf0f4;
  }
  .edit-stage{
    height: 100%;
    overflow: hidden;
  }
  .for-container-scroll{
    height: 100%;
    overflow: auto;
    overflow-x:hidden;
    overflow-y: auto;
  }
  .main-stage {
    height: 4000px;
    width: 100%;
    float: left;
    position: relative;
    background-image: url("../assets/image/background.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 10px 0;
  }
  .edit-panel{
    height: 100%;
    background-color: #fff;
    overflow: auto;
    position: relative;
    transition: width .15s ease-in;
    width: 200px;
  }
  .option-container{
    margin: 10px 8px 0;
    width: 184px;
  }
  .panel-title{
    margin: 10px 10px 0;
    padding: 0 10px;
    background-color: #fff;
    line-height: 34px;
    overflow-x: hidden;
  }
  .widget-panel{
    background-color: #fff;
    overflow-x:hidden;
    overflow-y: auto;
    margin:0 10px;
  }
  .widget-class-container {
    margin: 0 auto;
    padding: 0;
    width: 180px;
  }
  ul {
    display: block;
    list-style-type: disc;
  }
  .widget-class-item {
    list-style: none;
    float: left;
    width: 60px;
    height: 60px;
    margin: 15px 10px;
    cursor: pointer;
  }
  li{
    display: list-item;
    text-align: -webkit-match-parent;
  }
  .icon-wgt{
    width: 40px;
    height: 40px;
    margin: 0 10px;
  }
  .widget-name{
    text-align: center;
    font-size: 14px;
    margin: 3px auto;
  }

  .button-group{
    height: 40px;
    float: left;
    margin: 5px 10px;
  }
  .split-line{
    height: 34px;
    border-right: 1px dashed #fff;
    float: left;
    position: relative;
    top: 8px;
  }
  .align-span{
    border-top: 1px solid #d8dce5;
    border-bottom: 1px solid #d8dce5;
    box-shadow: none!important;
    padding: 8px 20px;
    font-size: 12px;
  }
  .left-span{
    border-left: 1px solid #d8dce5;
    border-radius: 4px 0 0 4px;
  }
  .center-span{
    border-left: 1px solid #d8dce5;
    border-right: 1px solid #d8dce5;
  }
  .right-span{
    border-right: 1px solid #d8dce5;
    border-radius:0 4px 4px 0;
  }
  /* 属性标题*/
  .title{
    font-size: 8px;
    font-weight: 600;
    padding: 0 3px;
  }
  .secondTitle{
    font-size: 13px;
    padding: 0 3px;
    margin: 6px 0;
  }
  /* 横向流式布局 */
  .flex-r{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  div.list-folder > li{
    display: inline;
    /*border: solid 1px black;*/
    float: left;
    /*margin-top: 5px;*/
    /*margin-right: 5px;*/

    padding: 10px;
  }  div.list-folder > ul{
       margin: 0px;
       padding: 0px;
     }
  .active{
    border: 2px dashed #ff3f34;
  }
  /deep/ .el-radio__label{
    /*padding: 0 !important;*/
    padding-left: 7px;
    margin: 5px 0 !important;
  }
  .list-group-item {
    cursor: move;
  }
  /*.list-group-item i {*/
  /*cursor: pointer;*/
  /*}*/
  .flip-list-move {
    transition: transform 0.5s;
  }
  .no-move {
    transition: transform 0s;
  }
  .foldLeft{
    height: 10px;
    width: 10px;
    background: #ecf0f4;
    float: left;
  }
  .leftIcon{
    background: #8a8a8a;
    position: absolute;
    top: 50%;
    width: 10px;
  }
  .foldRight{
    height: 10px;
    width: 10px;
    background: #ecf0f4;
    float: right;
  }
  .rightIcon{
    background: #8a8a8a;
    position: absolute;
    top: 50%;
    width: 10px;
  }
  .elCard{
    background: transparent;
    border: none;
    text-align: center;
    color: #fff;
  }
  .elCard:hover {
    color: #409EFF !important;
  }
  /deep/ .el-card__body{
    padding: 0px;
  }
  /deep/ .el-link.el-link--default {
    color: white !important;
  }
  /deep/ .el-link.el-link--default:hover {
    color: #409EFF !important;
  }
  /deep/ .el-divider__text, .el-link {
    font-weight: 500;
    font-size: 14px;
    margin: 5px;
  }
  .slide-fade-enter-active {
    transition: all .3s ease-in;
  }
  .slide-fade-leave-active {
    transition: all .3s ease-out;
  }
  .slide-fade-enter, .slide-fade-leave-to {
    /* .slide-fade-leave-active for below version 2.1.8 */
    transform: translateX(10px);
    opacity: 0;
  }
  .bgb{
    background-color: #409eff;
  }
</style>
